﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>订单拆分和合并</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/style.css">

  <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 150px;
      height: 70px;
      line-height: 150px;
      text-align: center;
    }
    .avatar {
      width: 150px;
      height: 70px;
      display: block;
    }

  </style>
</head>
<body class="hold-transition">
<div id="app">

  <div class="content-header">
    <h1>订单<small>订单详情</small></h1>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理</el-breadcrumb-item>
      <el-breadcrumb-item>order管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div class="app-container">
    <div class="box">
      <div class="filter-container">
        <!--查询表单-->
        <el-form :inline="true" >
          <el-form-item label="数量合计">
            <el-input v-model="searchMap.totalNum" placeholder="数量合计" class="filter-item" ></el-input></el-form-item>
          <el-form-item label="金额合计">
            <el-input v-model="searchMap.totalMoney" placeholder="金额合计" class="filter-item" ></el-input></el-form-item>
          <el-form-item label="优惠金额">
            <el-input v-model="searchMap.preMoney" placeholder="优惠金额" class="filter-item" ></el-input></el-form-item>
          <el-form-item label="邮费">
            <el-input v-model="searchMap.postFee" placeholder="邮费" class="filter-item" ></el-input></el-form-item>


          <div>
            <el-button type="primary"  class="butT" @click="formVisible2=true;splitOrder=orderId[0]">订单拆分</el-button>
            <el-button type="primary"  class="butT" @click="formVisible=true;order1=orderId[0];order2=orderId[1]">订单合并</el-button>
          </div>
        </el-form>
      </div>

      <el-table :data="tableData" border style="width: 100%" >
        <!--多选框-->
        <el-table-column width="50">
          <template slot-scope="scope" >
            <input type="checkbox"  :value="scope.row.id" v-model="orderId" >
          </template>
        </el-table-column>
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="id" label="订单编号" width="200"></el-table-column>
        <el-table-column prop="createTime" label="提交时间" width="200"></el-table-column>
        <el-table-column prop="username" label="用户名称" width="120"></el-table-column>
        <el-table-column prop="totalMoney" label="订单金额" width="80"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="80"></el-table-column>
        <el-table-column prop="shippingName" label="物流名称" width="120"></el-table-column>

        <el-table-column
                label="操作"  >
          <template slot-scope="scope">
            <el-button @click="edit(scope.row.id)" size="mini" type="primary" size="small">查看订单</el-button>
            <el-button @click="dele(scope.row.id)" size="mini" type="danger" size="small">关闭订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
                class="pagiantion"
                @size-change="fetchData"
                @current-change="fetchData"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
      </div>
      <div class="add-form">
        <!--弹出窗口 订单合并-->
        <el-dialog  title="编辑" :visible.sync="formVisible" >
          <el-form label-width="80px">
            <el-form-item label="主订单"><el-input v-model="order1"></el-input></el-form-item>
            <el-form-item label="从订单"><el-input v-model="order2"></el-input></el-form-item>

            <el-form-item>
              <el-button type="primary" @click="merge()">保存</el-button>
              <el-button @click="formVisible = false" >关闭</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <div class="add-form">
        <!--弹出窗口 订单拆分-->
        <el-dialog  title="订单拆分" :visible.sync="formVisible2" >
          <el-form :inline="true" >
            <el-form-item label="需要拆分的订单 :"><el-input v-model="splitOrder" style="width: 250px"></el-input></el-form-item>
            <el-button class="dalfBut" @click="findByOrderId()">查询</el-button>

          </el-form >
          <el-form label-width="80px" >

            <template>
              <el-table
                      :data="orderItem"
                      border
                      style="width: 100%">

                <el-table-column>
                  <template slot-scope="scope" >
                    <input type="checkbox"  :value="scope.row"  v-model="itemlist">
                  </template>
                </el-table-column>

                <el-table-column
                        prop="id"
                        label="订单详情号"
                        width="180" >
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格">
                </el-table-column>

                <el-table-column
                        prop="num"
                        label="数量">
                </el-table-column>

                <el-table-column label="拆分数量"  >
                  <template slot-scope="scope" >
                    <el-input type="text"  v-model="scope.row.splitnum" placeholder="请输入数量" />
                  </template>
                </el-table-column>

              </el-table>
            </template>

            <el-form-item>
              <el-button type="primary" @click="rest()">重置</el-button>
              <el-button type="primary" @click="split()">拆分</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

    </div>
  </div>


</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script>
    new Vue({
        el: '#app',
        data(){
            return {
                tableData: [],
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {},
                pojo: {},
                formVisible: false,
                formVisible2:false,
                imageUrl: '',
                ids:[],
                order1:'',   //主订单
                order2:'',     //从订单
                splitOrder:'', //拆分订单
                orderItem:[],  //查询拆分订单的 订单详情
                // splitpojo:{},     // id num 对象
                splitnum:[],     //拆分的数量
                itemlist:[],     //订单详情 整个对象集合
                orderId:[],       //勾选的订单id
                resultlist:[],

            }
        },
        created(){
            this.fetchData();

        },
        methods:{
            fetchData (){
                axios.post(`/order/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(response => {
                    this.tableData = response.data.rows;
                    this.total = response.data.total;
                });
            },
            save (){
                // this.pojo.image= this.imageUrl; //如页面有图片上传功能放开注释
                axios.post(`/order/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response => {
                    this.fetchData (); //刷新列表
                    this.formVisible = false ;//关闭窗口
                });
            },
            edit (id){
                this.formVisible = true // 打开窗口
                // 调用查询
                axios.get(`/order/findById.do?id=${id}`).then(response => {
                    this.pojo = response.data;
                    // this.imageUrl=this.pojo.image //显示图片  如页面有图片上传功能放开注释
                })
            },
            dele (id){
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( () => {
                    axios.get(`/order/delete.do?id=${id}`).then(response => {
                        this.fetchData (); //刷新列表
                    })
                })
            },

            merge(){
                alert(this.order1);
                axios.get(`order/merge.do?order1=${this.order1}&order2=${this.order2}`).then( response=>{
                    if(response.data.code==0){
                        alert("订单合并成功");
                        this.formVisible = false ;//关闭窗口
                        this.order1='';
                        this.order2='';
                    }else if(response.data.code==1){
                        alert("订单合并失败");
                        this.formVisible = false ;//关闭窗口
                        this.order1='';
                        this.order2='';
                    }else if(response.data.code==300){
                        alert(response.data.message);
                        this.formVisible = false ;//关闭窗口
                        this.order1='';
                        this.order2='';
                    }
                } )
            },
            findByOrderId(){
                alert(this.splitOrder);
                axios.get(`/order/findByOrderId.do?orderId=${this.splitOrder}`).then(  response=>{
                        this.orderItem = response.data;
                } )
            }
            ,
            //订单拆分
            split(){
                var splitpojo = {};

                for(var i=0;i<this.itemlist.length;i++){
                    splitpojo = {'id':this.itemlist[i].id,'num':this.itemlist[i].splitnum};
                    this.resultlist[i] = splitpojo;
                }

                // alert(this.itemlist[0].splitnum);
                // alert(this.resultlist[0].num);

                axios.post(`/order/split.do`,this.resultlist).then(  response=>{
                    if(response.data.code==0){
                        alert("订单拆分成功");
                    }
                    this.resultlist = [];   //订单详情id + num
                    this.itemlist = [];    //
                    this.orderItem=[] ;   //清空查询数据
                    this.formVisible = false ;//关闭窗口
                } )

            },
            //重置
            rest(){
                this.splitOrder='';
                this.orderId=[];
                this.orderItem=[] ;
            }
        }
    })
</script>
</html>
